<template>
  <div class="foot-main-box">
    <van-tabbar v-model="active">
      <van-tabbar-item @click="goPage(0)">
        <span>项目列表</span>
        <i slot="icon" class="iconfont icon-liebiao"></i>
      </van-tabbar-item>
      <van-tabbar-item icon="calendar" @click="goPage(1)">
        <span>日报填写</span>
        <i slot="icon" class="iconfont icon-ribao"></i
      ></van-tabbar-item>
      <van-tabbar-item icon="gem" @click="goPage(2)">
        <span>项目录入</span>
        <i slot="icon" class="iconfont icon-xiangmu"></i
      ></van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="goPage(3)"
        ><span>日报列表</span> <i slot="icon" class="iconfont icon-liebiao"></i
      ></van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="goPage(4)"
        ><span>个人</span> <i slot="icon" class="iconfont icon-gerenziliao"></i
      ></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  props: {
    activeProps: {
      type: Number,
      undefined: 0,
    },
  },
  data() {
    return {
      active: 0,
      icon: {
        active: "https://img.yzcdn.cn/vant/user-active.png",
        inactive: "https://img.yzcdn.cn/vant/user-inactive.png",
      },
    };
  },
  mounted() {
    this.active = this.activeProps;
  },
  methods: {
    // 跳转页面
    goPage(num) {
      switch (num) {
        case 0:
          if (this.$route.fullPath === "/MobileHomeView") return;
          this.$router.push("/MobileHomeView");
          break;
        case 1:
          if (this.$route.fullPath === "/info") return;
          this.$router.push("/info");
          break;
        case 2:
          if (this.$route.fullPath === "/infoEntry") return;
          this.$router.push("/infoEntry");
          break;
        case 3:
          if (this.$route.fullPath === "/MobileDailyInfo") return;
          this.$router.push("/MobileDailyInfo");
          break;
        case 4:
          if (this.$route.fullPath === "/person") return;
          this.$router.push("/person");
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.van-hairline--top-bottom {
  height: 80px;
  border: 1px solid #e0dbdb;
}
</style>